<template>
  <div id="app">
    <router-view></router-view>
    <!-- 底部导航栏 -->
    <div class="bottom-buttons" v-if="showBottomNav">
      <div class="button-container">
        <button
          v-for="btn in bottomButtons"
          :key="btn.id"
          class="side-btn"
          :class="{ active: isButtonActive(btn.id) }"
          @click="switchBottom(btn.id)"
        >
          {{ btn.name }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 底部导航按钮
const bottomButtons = ref([
  { id: 'zy', name: '主页' },
  { id: 'dw', name: '定位' },
  { id: 'mxz', name: '卖闲置' },
  { id: 'xx', name: '消息' },
  { id: 'wd', name: '我的' }
])

// 控制底部导航显示
const showBottomNav = computed(() => {
  return !['/login', '/forgot', '/zhuce'].includes(route.path)
})

// 判断底部按钮激活状态
const isButtonActive = (btnId) => {
  return (
    (btnId === 'zy' && route.path === '/') ||
    (btnId === 'wd' && route.path.startsWith('/mine')) ||
    (btnId === 'mxz' && route.path === '/tofabu') ||
    (btnId === 'xx' && route.path === '/message')
  )
}

// 底部导航切换处理
const switchBottom = (btnId) => {
  if(btnId === 'zy') router.push('/')
  if(btnId === 'mxz') router.push('/tofabu')
  if(btnId === 'xx') router.push('/message')
  if(btnId === 'wd') {
    if(localStorage.getItem('isLoggedIn') === 'true') {
      router.push({ name: 'Mine' })
    } else {
      router.push({ name: 'Login' })
    }
  }
}
</script>

<style scoped>

#app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}


.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 12px 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100;
}

.button-container {
  display: flex;
  justify-content: space-around;
  max-width: 600px;
  margin: 0 auto;
}

.side-btn {
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.3s;
}

.side-btn.active {
  color: #4CAF50;
}

@media (max-width: 768px) {
  .button-container {
    padding: 0 15px;
  }
}
</style>